.whole_main_blue {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
  box-sizing: border-box;
  .whole_left_main {
    position: relative;
    width: 496px;
    height: 976px;
    background-color: @blueBlockBg;
    border-radius: 8px;
    padding: 0 16px;
    box-sizing: border-box;
    .whole_title {
      width: 100%;
      line-height: 57px;
      text-align: center;
      font-family: MicrosoftYaHei-Bold;
      font-size: 24px;
      color: #dfecf9;
      // border-bottom: 2px solid #334e73;
      background-color: #073974;
    }
    .two_title{
      position: relative;
      padding-left: 10px;
      color: #fff;
      font-size: 20px;
    }
    .two_title::after{
      content: "";
      position: absolute;
      top: 50%;
      left: 0px;
      transform: translateY(-50%);
      width: 4px;
      height: 20px;
      background-color: #fff;
    }
    .follow_early_box {
      width: 100%;
      padding: 0 16px;
      margin-top: 32px;
      margin-bottom: 60px;
      box-sizing: border-box;
      .follow_icon {
        width: 80px;
        height: 80px;
      }
      .follow_text-box {
        height: 80px;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
  
        .text {
          font-family: MicrosoftYaHei-Bold;
          font-size: 18px;
          color: #c3dfff;
          span {
            font-family: DIN-RegularAlternate;
            font-size: 24px;
            color: #c3dfff;
            margin-left: 16px;
          }
        }
      }
    }
    .wl_wrap {
      position: relative;
      width: 100%;
      height: 155px;
      .wl_left {
        position: absolute;
        top: 50%;
        left: 20px;
        transform: translateY(-50%);
        .arrow {
          width: 160px;
          line-height: 32px;
          text-align: center;
          font-family: MicrosoftYaHei;
          font-size: 18px;
          color: #dfecf9;
          background: url("../../../assets/sImg/arrow-bg-l.png");
          background-size: 100% 100%;
          span {
            font-family: DIN-RegularAlternate;
            font-size: 24px;
            color: #dfecf9;
            margin-left: 16px;
          }
        }
        .arrow-top {
          margin-bottom: 20px;
        }
      }
      .wl_center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .wl_box {
          width: 102px;
          height: 105px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          .text {
            font-family: MicrosoftYaHei-Bold;
            font-size: 18px;
            color: #c3dfff;
          }
        }
        
      }
      .dian_box {
        position: absolute;
        bottom: 0px;
        width: 100%;
        display: flex;
        justify-content: center;
        .dian {
          width: 12px;
          height: 12px;
          background-color: #0d4b86;
          border: 1px solid #0192f7;
          box-sizing: border-box;
          border-radius: 50%;

          cursor: pointer;
        }
        .dian:nth-child(1) {
          margin-right: 10px;
        }
        .dianAc {
          background-color: #0192f7;
          border: none;
        }
      }
      .wl_right {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
  
        .arrow {
          width: 160px;
          line-height: 32px;
          text-align: center;
          font-family: MicrosoftYaHei;
          font-size: 18px;
          color: #dfecf9;
          background: url("../../../assets/sImg/arrow-bg-r.png");
          background-size: 100% 100%;
          span {
            font-family: DIN-RegularAlternate;
            font-size: 24px;
            color: #dfecf9;
            margin-left: 16px;
          }
        }
        .arrow-top {
          margin-bottom: 20px;
        }
      }
    }
    .zs_list {
      width: 100%;
      height: 450px;
      padding: 20px 0;
      box-sizing: border-box;
      .title_box {
        display: flex;
        align-items: center;
        width: 100%;
        height: 40px;
        font-family: "微软雅黑 Bold", "微软雅黑 Regular";
        font-weight: 700;
        font-style: normal;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.8);
        background-color: #044291;
      }
      .tableBox {
        height: 400px;
        overflow-y: auto;
        &::-webkit-scrollbar {
          display: none;
        }
      }
      .title_item {
        flex: 1;
        text-align: center;
        line-height: 40px;
      }
      // .list_box {
      //   width: 100%;
      //   height: 400px;
        .list_item {
          width: 100%;
          height: 40px;
          display: flex;
          font-family: "微软雅黑 Bold", "微软雅黑 Regular";
          // font-weight: 700;
          font-style: normal;
          font-size: 16px;
          color: rgba(255, 255, 255, 0.8);
          .item {
            flex: 1;
            text-align: center;
            line-height: 40px;
          }
        }
        .list_item:nth-child(2n) {
          background-color: #03336d;
        }
      // }
      .zs_icon_wrap {
        display: flex;
        padding-top: 20px;
        box-sizing: border-box;
      }
      .zs_icon {
        width: 24px;
        height: 24px;
        color: #fff;
        background-color: #0d4b86;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 16px;
      }
    }
  }
  .whole_center_main {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    .early_box{
      width: calc(100% - 32px);
      height: 904px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #082752;
      border-radius: 8px;
    }
    .early_total_box {
      width: 600px;
      height: 600px;
      border-radius: 50%;
      position: relative;
      margin-top: 40px;
      .five_pointed {
        width: 100%;
        top: 240px;
        display: flex;
        justify-content: center;
      }
      .nav1 {
        width: 600px;
        height: 604px;
        position: absolute;
        left: 0;
        top: 0;
        >img{
          width: 100%;
        }
        .nav1_red {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          animation: turnS 6s linear infinite;
          img {
            position: absolute;
            bottom: 28px;
            left: 6px;
          }
        }
      }
      .nav2 {
        width: 540px;
        height: 540px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        >img{
          width: 100%;
        }
        .nav2_yel {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          animation: turnN 6s linear infinite;
          img {
            position: absolute;
            top: 60px;
            left: 0px;
          }
        }
      }
      .nav3 {
        width: 460px;
        height: 460px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -58.4%);
        // background-color: red;
        .nav3_num{
          // width: 120px;
          // height: 50px;
          text-align: center;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, 160%);
          // z-index: 19;
          .num{
            width: 120px;
            line-height: 50px;
            font-size: 48px;
            color: #dfebf8;
            background-color: #064485;
            font-family: "DIN Alternate";
          }
          .text{
            font-family: MicrosoftYaHei-Bold;
            font-size: 16px;
            color: #dfecf9;
            margin-top: 10px;
          }
        }
        .nav3_three {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
        .nav3_img{
          width: 100%;
          height: 100%;
          position: absolute;
          top: 37px;
          z-index: -1;
        }
        .nav3_disable {
          width: 424px;
          height: 424px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
        .info_box {
          width: 100%;
          position: absolute;
          bottom: 60px;
          left: 0;
          z-index: 11;
          .num {
            width: 100%;
            text-align: center;
            font-family: DIN-RegularAlternate;
            font-size: 48px;
            color: #c3dfff;
          }
          .text {
            width: 100%;
            text-align: center;
            font-family: MicrosoftYaHei;
            font-size: 24px;
            color: #c3dfff;
          }
        }
      }
      .map_box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .lamp_box {
        width: 100%;
        position: absolute;
        top: 160px;
        left: 0;
        .lamp_item {
          width: 40px;
          height: 40px;
          opacity: 0.5;
        }
        .green {
          background: url("../../../assets/images/sImg/g-y.png");
        }
        .yellow {
          margin: 0 10px;
          background: url("../../../assets/images/sImg/y-y.png");
        }
        .red {
          background: url("../../../assets/images/sImg/r-y.png");
        }
        .active {
          animation: changeLamp 4s linear infinite;
        }
        @keyframes changeLamp {
          0% {
            opacity: 0.5;
          }
          10% {
            opacity: 1;
          }
          20% {
            opacity: 0.5;
          }
          30% {
            opacity: 1;
          }
          40% {
            opacity: 0.5;
          }
          50% {
            opacity: 1;
          }
          60% {
            opacity: 0.5;
          }
          70% {
            opacity: 1;
          }
          80% {
            opacity: 0.5;
          }
          90% {
            opacity: 1;
          }
          100% {
            opacity: 0.5;
          }
        }
      }
      .min_chart_box {
        width: 352px;
        position: absolute;
        top: 53%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .pointer_box {
        position: absolute;
        top: 56%;
        left: 39%;
        transform: translate(-50%, -50%);
        img {
          transform: rotate(0deg);
          transform-origin: 86% 50%;
        }
      }
      .min_chart {
        position: relative;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background-color: rgba(6, 44, 89, 0.7);
        .box1 {
          width: 118px;
          height: 120px;
        }
        .box2 {
          width: 91px;
          height: 91px;
        }
        .num {
          top: 60px;
          font-family: DIN-RegularAlternate;
          font-size: 30px;
          color: #c3dfff;
        }
        .min_lamp {
          width: 100%;
          top: 90px;
          display: flex;
          justify-content: center;
          z-index: 10;
          .lamp {
            width: 12px;
            height: 12px;
          }
        }
        .title {
          top: 107px;
          font-size: 14px;
          color: #ffffff;
        }
      }
    }
    .early_index_box {
      width: 100%;
      margin-top: 30px;
      display: flex;
    }
    .early_index_item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .chart_box {
        width: 170px;
        height: 170px;
      }
      .index_title {
        font-family: MicrosoftYaHei-Bold;
        font-size: 16px;
        color: #c3dfff;
      }
      .chart_title {
        display: flex;
        justify-content: center;
        padding-top: 16px;
        box-sizing: border-box;
        .tit_item {
          display: flex;
          align-items: center;
          margin-right: 20px;
          font-family: MicrosoftYaHei;
          font-size: 12px;
          color: #ffffff;
          span {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            margin-right: 11px;
          }
          .dian1 {
            background-color: #ff7372;
          }
          .dian2 {
            background-color: #f5de5a;
          }
          .dian3 {
            background-color: #71c184;
          }
        }
        .tit_item:last-child {
          margin-right: 0;
        }
      }
    }
    .early_Jump_box {
      width: 100%;
      flex: 1;
      padding: 16px 16px 0;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      .early_Jump_title {
        width: 100%;
        height: 100%;
        padding-left: 16px;
        background-color: #082752;
        display: flex;
        // justify-content: center;
        align-items: center;
        border-radius: 8px;
        img{
          width: 40px;
          // height: 40px;
        }
      }
      .Jump_title_item {
        position: relative;
        text-align: center;
        font-family: MicrosoftYaHei-Bold;
        font-size: 16px;
        color: #c3dfff;
        padding: 0 30px;
        cursor: pointer;
      }
      .Jump_title_item::after{
        content: "";
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background-color: #9ca9ba;
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
      }
    }
    @keyframes turnS {
      0% {
        transform: rotate(360deg);
      }
      100% {
        transform: rotate(0deg);
      }
    }
    @keyframes turnN {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  }
  .whole_right_main {
    position: relative;
    width: 496px;
    height: 976px;
    background-color: #082752;
    border-radius: 8px;
    padding: 0 16px;
    box-sizing: border-box;
    .whole_title {
      width: 100%;
      line-height: 57px;
      text-align: center;
      font-family: MicrosoftYaHei-Bold;
      font-size: 24px;
      color: #dfecf9;
      // border-bottom: 2px solid #334e73;
      background-color: #073974;
    }
    .whole_title02{
      margin-top: 20px;
    }
    .two_title{
      position: relative;
      padding-left: 10px;
      color: #fff;
      font-size: 20px;
    }
    .two_title::after{
      content: "";
      position: absolute;
      top: 50%;
      left: 0px;
      transform: translateY(-50%);
      width: 4px;
      height: 20px;
      background-color: #fff;
    }
    .whole_arrow {
      width: 31px;
      height: 90px;
      position: absolute;
      top: 50%;
      left: -30px;
      transform: translateY(-50%);
      background: url("../../../assets/images/sImg/right_shou.png") no-repeat;
      cursor: pointer;
      z-index: 10;
    }
    .title {
      width: 100%;
      height: 48px;
      padding-top: 15px;
      display: flex;
      justify-content: center;
    }
    .whole_zc_info {
      width: 100%;
      .title_wrap {
        width: 100%;
        margin-top: 15px;
        .title_item {
          width: 96px;
          height: 34px;
          font-family: MicrosoftYaHei-Bold;
          font-size: 14px;
          color: #ffffff;
          // background: url("../../assets/images/sImg/y.png");
          background: url("../../../assets/images/sImg/n.png") no-repeat;
          cursor: pointer;
        }
        .active {
          background: url("../../../assets/images/sImg/y.png") no-repeat;
        }
      }
      .zc_cont_box {
        width: 100%;
        height: 366px;
        padding-top: 20px;
        box-sizing: border-box;
        .zc_cont_title{
          margin-bottom: 16px;
          text-align: center;
          font-family: MicrosoftYaHei;
          font-size: 18px;
          color: #dfecf9;
        }
        .water_polo_box{
          width: 100%;
          height: 241px;
          margin-top: 24px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #082e5f;
        }
        .water_huan_box{
          width: 100%;
          height: 241px;
          margin-top: 24px;
          background-color: #082e5f;
          position: relative;
          .go_back{
            position: absolute;
            top: 16px;
            left: 8px;
            color: #fff;
            cursor: pointer;
          }
          .chart_wrap{
            padding-top: 0;
            .chart_box{
              width: 100%;
              height: 192px;
            }
          }
        }
        .chart_title {
          display: flex;
          justify-content: center;
          padding-top: 16px;
          box-sizing: border-box;
          .tit_item {
            display: flex;
            align-items: center;
            margin-right: 26px;
            font-family: MicrosoftYaHei;
            font-size: 12px;
            color: #ffffff;
            span {
              width: 9px;
              height: 9px;
              border-radius: 50%;
              margin-right: 11px;
            }
            .dian1 {
              background-color: #ff7372;
            }
            .dian2 {
              background-color: #f5de5a;
            }
            .dian3 {
              background-color: #71c184;
            }
          }
        }
        .chart_wrap {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
          padding-top: 15px;
          box-sizing: border-box;
          .chart_box {
            width: 50%;
            height: 130px;
          }
        }
        .zc_chart_box {
          padding-top: 30px;
          padding-bottom: 20px;
          width: 100%;
          height: 300px;
          box-sizing: border-box;
        }
        .dian_box {
          width: 100%;
          display: flex;
          justify-content: center;
          .dian {
            width: 12px;
            height: 12px;
            background-color: #0d4b86;
            border: 1px solid #0192f7;
            box-sizing: border-box;
            border-radius: 50%;
  
            cursor: pointer;
          }
          .dian:nth-child(1) {
            margin-right: 20px;
          }
          .dianAc {
            background-color: #0192f7;
            border: none;
          }
        }
      }
      .wl_chart_box {
        width: 100%;
        height: 366px;
        padding-top: 20px;
        box-sizing: border-box;
        .zc_cont_title{
          margin-bottom: 16px;
          text-align: center;
          font-family: MicrosoftYaHei;
          font-size: 18px;
          color: #dfecf9;
        }
        .water_polo_box{
          width: 100%;
          height: 241px;
          margin-top: 24px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #082e5f;
        }
        .ther_box{
          width: 100%;
          height: 100%;
        }
        .ther_box_item{
          width: 100%;
          height: 85%;
        }
        .ther_box_text{
          line-height: 20px;
          text-align: center;
          font-family: MicrosoftYaHei;
          font-size: 16px;
          color: #dfecf9;
        }
        .chart_title {
          display: flex;
          justify-content: center;
          box-sizing: border-box;
          .tit_item {
            display: flex;
            align-items: center;
            margin-right: 26px;
            font-family: MicrosoftYaHei;
            font-size: 12px;
            color: #ffffff;
            span {
              width: 9px;
              height: 9px;
              border-radius: 50%;
              margin-right: 11px;
            }
            .dian1 {
              background-color: #ff7372;
            }
            .dian2 {
              background-color: #f5de5a;
            }
            .dian3 {
              background-color: #71c184;
            }
          }
        }
        .pd1 {
          padding-top: 50px;
        }
        .pd2 {
          padding-top: 20px;
        }
        .wl_chart_wrap {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
          padding-top: 15px;
          box-sizing: border-box;
        }
        .chart_box01 {
          width: 50%;
          height: 130px;
        }
        .chart_box {
          width: 100%;
          height: 300px;
        }
      }
    }
  }
}
.nav_green{
  .whole_left_main {
    background-color: @genBlockBg !important;
    .whole_title {
      // border-bottom: 2px solid #336d6d !important;
      background-color: #105445 !important;
    }
    .title_box {
      background-color: #02575b !important;
    }

    .list_item:nth-child(2n) {
      background-color: #025355 !important;
    }
    .zs_icon {
      background-color: #017586 !important;

    }
    .wl_left {
      .arrow {
        background: url("../../../assets/sImg/arrow-bg-l1.png") !important;
      }
    }
    .wl_right {
      .arrow {
        background: url("../../../assets/sImg/arrow-bg-r1.png") !important;
      }
    }
    .dian_box {
      position: absolute;
      bottom: 0px;
      width: 100%;
      display: flex;
      justify-content: center;
      .dian {
        width: 12px;
        height: 12px;
        background-color: #077579 !important;
        border: 1px solid #094b1d !important;
        box-sizing: border-box;
        border-radius: 50%;

        cursor: pointer;
      }
      .dian:nth-child(1) {
        margin-right: 10px;
      }
      .dianAc {
        background-color: #0093b1 !important;
      }
    }
  }
  .whole_center_main{
    .early_box{
      background-color: @genBlockBg !important;
    }
    .min_chart {
      background-color: rgba(2, 72, 69, 0.7) !important;
      
    }
    .nav3_num{
      .num {
        background: #065c55 !important;
      }
    } 
  }
  .early_Jump_title {
    background-color: @genBlockBg !important;
  }  

  .whole_right_main {
    background-color: @genBlockBg;
    .whole_title {
      // border-bottom: 2px solid #336d6d !important;
      background-color: #105445 !important;
    }
    .water_polo_box{
      background-color: @genBoxBg !important;
    }
    .water_huan_box{
      background-color: @genBoxBg !important;
    }
    .dian{
      background-color: #0d4b86;
      border: 1px solid #0192f7;
    }
    .dianAc {
      background-color: @genBoxBg !important;
    }
    .whole_zc_info {
      .title_item {
        background: url("../../../assets/images/sImg/n1.png") no-repeat !important;
        background-size: 100% 100% !important;
      }
      .active {
        background: url("../../../assets/images/sImg/y1.png") no-repeat !important;
        background-size: 100% 100% !important;
      }
    }
  }
}
